<template>
  <div>
    <div style="display: inline">
    <el-input
        placeholder="搜索..."
        size="mini"
        style="width: 300px;margin: 0px;padding: 0px;">
    </el-input>
    <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search">搜索
    </el-button>      
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddPermissionView">添加权限
    </el-button>      
      
    </div>
    <el-table
      ref="multipleTable"
      :data="permissionList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="权限id"
        width="200">
      </el-table-column>
      <el-table-column
        prop="parentId"
        label="父id"
        width="200">
      </el-table-column>
      <el-table-column
        prop="name"
        label="权限名称"
        width="200">
      </el-table-column>
      <el-table-column
        prop="permissionKey"
        label="权限标识符"
        width="200">
      </el-table-column>
      <el-table-column
        prop="type"
        label="权限类型"
        width="200"
        sortable>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="200"
        sortable>
      </el-table-column>
      <el-table-column 
        label="操作"
        width="200">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="permissionList.length">
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识符" prop="permissionKey">
          <el-input v-model="form.permissionKey"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" prop="type">
          <el-input v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="vue路径" prop="path">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item label="vue组件" prop="component">
          <el-input v-model="form.component"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单" prop="menu">
          <el-tree :data="permissionTree" 
                   :props="defaultProps"
                    node-key="id"
                    ref="tree"
                    highlight-current
                   @node-click="handleNodeClick">
          </el-tree>
        </el-form-item>
        <el-form-item label="已挑选" prop="parentId">
          <el-tag type="success">{{singleChecked.name}}</el-tag>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addPermission(form)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
  
</template>

<script>
  export default {
    data() {
      return {
        permissionList: [],
        permissionTree: [],
        currentPage: 1,
        pageSize: 20,
        multipleSelection: [],
        dialogTitle: '',
        dialogVisible: false,
        form: {
          name: '',
          permissionKey: '',
          type: '',
          parentId: 0,
          component: '',
          path: ''
        },
        index: '',
        row: '',
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        singleChecked: {
          id: 0,
          name: '根目录'
        },
      }
    },

    created () {
      // 组件创建完后获取数据，
      // 此时 data 已经被 observed 了
      this.getPermissionList()
    },

    // watch: {
    //   // 如果路由有变化，会再次执行该方法
    //   '$route': 'getUserList'
    // },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index, row) {

        this.getPermissionTree();

        if (row.parentId != 0) {
          this.getRequest("/permission/" + row.parentId).then(data=> {
            console.log('获取父节点:' + JSON.stringify(data));
            this.singleChecked = data;
          })   
        }
        
        this.form.name = row.name;
        this.form.permissionKey = row.permissionKey;
        this.form.path = row.path;
        this.form.component = row.component;
        this.form.type = row.type;

        this.dialogTitle = "编辑权限";
        this.dialogVisible = true;
        this.index = index;
        this.row = row;
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除[' + row.name + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest("/permission/" + row.id).then(data=> {
            this.$message({
              message: '删除权限成功',
              type: 'success'
            });
            this.permissionList.splice(index, 1);
          })
        })
        
      },
      handleSizeChange(size) {
        this.pageSize = size;
      },
      handleCurrentChange(currentPage){
        this.currentPage = currentPage;
      },
      getPermissionList(){
        this.getRequest("/permission").then(data=> {
            this.permissionList = data;
        })
      },
      getPermissionTree(){
        this.getRequest("/permission/tree").then(data=> {
            this.permissionTree = data;
        })
      },
      showAddPermissionView(){
        this.initFormData();
        this.getPermissionTree();
        this.dialogVisible = true;
        
      },
      addPermission(form){
        this.dialogTitle = '添加权限';
        this.form.parentId = this.singleChecked.id;

        if (!this.row.id) {
          //添加
          this.postRequest("/permission", JSON.stringify(form)).then(data=> {
            this.$message({
              message: '添加成功，新增的权限为：' +　data.name,
              type: 'success'
            });
            this.permissionList.push(data);
            this.dialogVisible = false;
          })      
        }else{
          
          let permissionForm = {};
          permissionForm.name = this.form.name;
          permissionForm.permissionKey = this.form.permissionKey;
          permissionForm.type = this.form.type;
          permissionForm.parentId = this.form.parentId;
          permissionForm.path = this.form.path;
          permissionForm.component = this.form.component;
          permissionForm.id = this.row.id;

          if (permissionForm.id == permissionForm.parentId) {
            this.$message({
              message: '不能选择自己为父菜单',
              type: 'error'
            });
            return;
          }
          console.log('id:' + permissionForm.id + "pId:" + permissionForm.parentId);

          //修改
          this.putRequest("/permission/" + permissionForm.id, JSON.stringify(permissionForm)).then(data=> {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.permissionList.splice(this.index, 1, data);
            this.index = '';
            this.row = '';
            this.dialogVisible = false;
          })              
        }      
      },
      cancel(){
        this.dialogVisible = false;
        this.initFormData();
      },
      initFormData(){
        this.form = {
          name: '',
          permissionKey: '',
          type: '',
          parentId: 0,
          component: '',
          path: '',
        };
        this.singleChecked = {
          id: 0,
          name: '根目录'
        }
      },
      handleNodeClick(data) {
        this.singleChecked = data;
        console.log('handleNodeClick:' + this.singleChecked.id);
      },

    }
  }
</script>